<!--
 * @Author: your name
 * @Date: 2021-11-25 09:38:57
 * @LastEditTime: 2021-12-02 14:18:32
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\client\src\view\Home.vue
-->
<template>
  <div class="home">
    <div class="left-main main-item">
      <div class="swiper-card" v-if="path === '/'">
        <template v-if="swiperList.length">
          <a-carousel autoplay>
            <div
              v-for="item in swiperList"
              :key="item.id"
              class="swiper-item"
              @click="toArticleDetail(item.id)"
            >
              <img :src="item.cover" alt="" style="background-color: #a6a6a6" />
              <div class="item-mark">
                <div class="mark-title">{{ item.title }}</div>
                <div class="mark-desc">
                  {{ item.release_time }} · {{ item.looks }} {{ $t("reading") }}
                </div>
              </div>
            </div>
          </a-carousel>
        </template>
      </div>
      <HintCom
        v-else
        :text="classify"
        :num="num"
        :title="$t('cate_article')"
        :prefix="$t('total_search')"
        :piece="$t('count')"
      />
      <el-card class="classify-tab-card">
        <div slot="header" class="clearfix">
          <div
            v-for="(item, index) in tabList"
            :key="item.value"
            @click="toClassifyDetail(item.value)"
            :class="activeClass(item.value)"
          >
            {{ index === 0 ? $t("all") : item.text }}
          </div>
        </div>
        <NavContent
          v-if="path === '/'"
          :data="allArticle"
          :handlerClick="toArticleDetail"
        />
        <router-view></router-view>
      </el-card>
    </div>
    <div class="right-main main-item">
      <!-- 推荐文章 -->
      <RecommendArticle
        :data="recommendArticle"
        :handlerClick="toArticleDetail"
        :title="$t('recommend_title')"
      />
      <!-- 标签 -->
      <Tag
        :data="TagList"
        :handlerClick="toTagDetail"
        :title="$t('tags_title')"
      />
    </div>
  </div>
</template>

<script>
import api from "../api";
import getDateDiff from "@/utils/getDateDiff";
import RecommendArticle from "../components/Recommend.vue";
import Tag from "../components/Tag.vue";
import NavContent from "../components/NavContent.vue";
import HintCom from "../components/HintCom.vue";
export default {
  components: {
    RecommendArticle,
    Tag,
    NavContent,
    HintCom,
  },
  data() {
    return {
      TagList: [],
      swiperList: [],
      recommendArticle: [], //最新文章
      allArticle: [], //全部文章
      tabList: [
        {
          text: "所有",
          value: "/",
        },
      ],
      classify: "",
      num: 0,
    };
  },
  computed: {
    path() {
      const route = this.$route.fullPath;
      return route;
    },
  },
  watch: {
    path() {
      this.getClassifyNum();
      this.retainClassify();
    },
  },
  methods: {
    //初始化函数
    init() {
      this.getAllArticle();
      this.getClassifyList();
      this.getRecommendArticle();
      this.getClientTag();
    },
    //获取全部文章
    async getAllArticle() {
      const res = await api.getStateArticle();
      if (res.success) {
        this.allArticle = res.data;
        this.allArticle = this.allArticle.map((item) => {
          return {
            ...item,
            release_time: getDateDiff(new Date(item.release_time).getTime()),
          };
        });
      } else {
        this.$message({
          type: "warning",
          message: "意外的错误",
        });
      }
    },
    //获取最新文章
    async getRecommendArticle() {
      const res = await api.recommendArticle();
      if (res.success) {
        this.recommendArticle = res.data;
        this.recommendArticle = this.recommendArticle.map((item) => {
          return {
            ...item,
            release_time: getDateDiff(new Date(item.release_time).getTime()),
          };
        });
        const swiper = await api.getFocusArticle();
        this.swiperList = swiper.data;
        this.swiperList = this.swiperList.map((item) => {
          return {
            ...item,
            release_time: getDateDiff(new Date(item.release_time).getTime()),
          };
        });
        this.getClassifyNum();
        this.retainClassify();
      } else {
        this.$message({
          type: "warning",
          message: "意外的错误",
        });
      }
    },
    getClassifyNum() {
      this.num = 0;
      const index = this.tabList.findIndex(
        (item) => item.value === this.path.split("/classify/")[1]
      );
      this.allArticle.forEach((item) => {
        //ERROR Error: Uncaught (in promise): TypeError: Cannot read property "xxx(text)" of undefined
        //solve https://blog.csdn.net/qq_39273423/article/details/116057519
        if (item.classify === this.tabList[index]?.text) {
          this.num = this.num + 1;
        }
      });
    },
    //刷新保留classify值
    retainClassify() {
      if (this.path === "/") {
        this.toClassifyDetail(this.path);
      } else {
        let value = this.path.split("/classify/")[1];
        this.toClassifyDetail(value);
      }
    },
    //获取标签列表
    async getClientTag() {
      const res = await api.getClientTag();
      if (res.success) {
        this.TagList = res.data;
        this.TagList = this.TagList.map((item) => {
          if (item.num) return item;
          return { ...item, num: 0 };
        });
        this.TagList.sort((a, b) => {
          return b.num - a.num;
        });
      } else {
        this.$message({
          type: "warning",
          message: "意外的错误",
        });
      }
    },
    //获取分类列表
    async getClassifyList() {
      const res = await api.getClassifyList();
      if (res.success) {
        res.data.forEach((item) => {
          this.tabList.push(item);
        });
      } else {
        this.$message({
          type: "warning",
          message: "意外的错误",
        });
      }
    },
    //跳转文章详情
    toArticleDetail(id) {
      this.$router.push({
        path: `/article/${id}`,
      });
    },
    //跳转标签详情
    toTagDetail(value) {
      this.$router.push({
        path: `/tag/${value}`,
      });
    },
    //跳转分类详情
    toClassifyDetail(data) {
      if (data !== "/") {
        this.$router.push(`/classify/${data}`);
        const index = this.tabList.findIndex((item) => item.value === data);
        this.classify = this.tabList[index]?.text;
      } else {
        this.$router.push(data);
      }
    },
    //tab高亮样式
    activeClass(path) {
      if (path === "/") {
        if (this.path === path) {
          return "tab-item active";
        } else {
          return "tab-item";
        }
      } else {
        if (path === this.path.split("/classify/")[1]) {
          return "tab-item active";
        } else {
          return "tab-item";
        }
      }
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/common/common.scss";
.home {
  .left-main {
    width: 70%;
  }
  .right-main {
    width: 28%;
  }
}

.swiper-card {
  width: 100%;
  padding: 8px;
  @include background_color("card_background");
  border-radius: 2px;
  .swiper-item {
    position: relative;
  }
}
.item-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  .mark-title {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .mark-desc {
    font-size: 14px;
  }
}
.ant-carousel {
  width: 100%;
  height: 332px;
  img {
    width: 100%;
    height: 332px;
  }
}
.classify-tab-card {
  margin: 20px 0;
  @include background_color("card_background");
  @include font_color("text-color");
  border: none;
}
.classify-tab-card .clearfix {
  display: flex;
  align-items: center;
  @include font_color("text-color");
  .tab-item {
    cursor: pointer;
    margin: 0 15px;
  }
  .tab-item:hover {
    color: #ff0064;
  }
  .tab-item.active {
    color: #ff0064;
  }
}
</style>
